/** 
  查看
*/
<template>
  <div class="select-score-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('scoreEntryMana.scoreList') + '（' + selectNum + '）' + $t('scoreEntryMana.people')" name="first">
        <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
          <el-row style="padding: 15px 0 7px 0;">
            <!-- 课程代码 -->
            <el-col :span="8">
              {{ $t('scoreEntryMana.courseCode') }}：{{ basicInfo.courseCode }}
            </el-col>
            <!-- 课程名称 -->
            <el-col :span="8">
              {{ $t('scoreEntryMana.courseName') }}：{{ basicInfo.courseName }}
            </el-col>
            <!-- 课程序号 -->
            <el-col :span="8">
              {{ $t('scoreEntryMana.courseNum') }}：{{ basicInfo.courseNo }}
            </el-col>
          </el-row>
          <el-row style="margin: 15px 0;">
            <el-col :span="24">
              <el-table border :data="basicInfo.studentList" size="mini">
                <!-- 序号 -->
                <el-table-column :label="$t('scoreEntryMana.serialNumber')" type="index" align="center" width="80"></el-table-column>
                <!-- 学号 -->
                <edu-table-column :label="$t('scoreMangementBase.studentId')" prop="studentId" align="center"></edu-table-column>
                <!-- 姓名 -->
                <edu-table-column :label="$t('scoreMangementBase.studentName')" prop="studentName" align="center"></edu-table-column>
                <!-- 修读类别 -->
                <edu-table-column :label="$t('scoreEntryMana.courseCategory')" prop="learnTypeI18n" align="center"></edu-table-column>
                <!-- 平时成绩1 改为 过程性考核1 -->
                <edu-table-column v-if="basicInfo.minorScoreStructureBean && basicInfo.minorScoreStructureBean.containDailyScore1" :label="$t('scoreEntryMana.usuallyOneGrade')" prop="exam1" align="center">
                  <template slot-scope="scope">
                    <span :style="scope.row.exam1Flag === 'Y' ? 'color: red;' : ''">{{ scope.row.exam1 }}</span>
                  </template>
                </edu-table-column>
                <!-- 平时成绩2 改为 过程性考核2 -->
                <edu-table-column v-if="basicInfo.minorScoreStructureBean && basicInfo.minorScoreStructureBean.containDailyScore2" :label="$t('scoreEntryMana.usuallyTwoGrade')" prop="exam2" align="center">
                  <template slot-scope="scope">
                    <span :style="scope.row.exam2Flag === 'Y' ? 'color: red;' : ''">{{ scope.row.exam2 }}</span>
                  </template>
                </edu-table-column>
                <!-- 期中成绩 改为 考勤 -->
                <edu-table-column v-if="basicInfo.minorScoreStructureBean && basicInfo.minorScoreStructureBean.containMidtermScore" :label="$t('scoreEntryMana.midTermGrades')" prop="middleScore" align="center">
                  <template slot-scope="scope">
                    <span :style="scope.row.middleScoreFlag === 'Y' ? 'color: red;' : ''">{{ scope.row.middleScore }}</span>
                  </template>
                </edu-table-column>
                <!-- 期末成绩 -->
                <edu-table-column v-if="basicInfo.minorScoreStructureBean && basicInfo.minorScoreStructureBean.containFinalScore" :label="$t('scoreEntryMana.finalGrade')" prop="finalScore" align="center">
                  <template slot-scope="scope">
                    <span :style="targetFinalScore(scope.row)">{{ scope.row.retakeScore ? scope.row.retakeScore : (scope.row.slowScore ? scope.row.slowScore : scope.row.finalScore) }}</span>
                  </template>
                </edu-table-column>
                <!-- 总评成绩 -->
                <template v-if="basicInfo.examType === '2'">
                  <!-- 总评成绩 -->
                  <edu-table-column :label="$t('scoreEntryMana.overallRating')" prop="totalScore" align="center">
                    <template slot-scope="scope">
                      <span :style="getTotalScoreType(scope.row)">{{ scope.row.reSlowTotalScore ? scope.row.reSlowTotalScore : scope.row.totalScore }}</span>
                    </template>
                  </edu-table-column>
                </template>
                <!-- 重缓考 -->
                <template v-if="basicInfo.examType === '1'">
                  <!-- 重考成绩 -->
                  <edu-table-column :label="$t('redelayTestScoreMana.retakeScore')" prop="retakeScore" align="center">
                    <template slot-scope="scope">
                      <span :style="scope.row.retakeScoreFlag === 'Y' ? 'color: red;' : ''">{{ scope.row.retakeScore }}</span>
                    </template>
                  </edu-table-column>
                  <!-- 缓考成绩 -->
                  <edu-table-column :label="$t('redelayTestScoreMana.postponement')" prop="slowScore" align="center">
                    <template slot-scope="scope">
                      <span :style="scope.row.slowScoreFlag === 'Y' ? 'color: red;' : ''">{{ scope.row.slowScore }}</span>
                    </template>
                  </edu-table-column>
                </template>
                <!-- 最终成绩 -->
                <edu-table-column :label="$t('scoreEntryMana.finalResult')" prop="lastScore" align="center">
                  <template slot-scope="scope">
                    <span :style="getTotalScoreType(scope.row)">{{ scope.row.reSlowTotalScore ? scope.row.reSlowTotalScore : scope.row.totalScore }}</span>
                  </template>
                </edu-table-column>
                <!-- 绩点 -->
                <edu-table-column :label="$t('gradeRelatedSetting.gradePoint')" prop="gradePoint" align="center"></edu-table-column>
                <!-- 通过 -->
                <edu-table-column :label="$t('scoreMangementBase.pass')" prop="isPass" align="center">
                  <template slot-scope="scope">
                    <span :style="scope.row.isPass === '0' ? 'color: red;' : ''">{{ scope.row.isPass === '0' ? $t('scoreMangementBase.no') : (scope.row.isPass === '1' ? $t('scoreMangementBase.yes') : '') }}</span>
                  </template>
                </edu-table-column>
                <!-- 状态 -->
                <edu-table-column :label="$t('scoreEntryMana.status')" prop="releaseType" align="center">
                  <template slot-scope="scope">{{ scope.row.releaseType === '1' ? $t('scoreEntryMana.alreadyPublish') : (scope.row.releaseType === '0' ? $t('scoreEntryMana.notPublish') : '') }}</template>
                </edu-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
      <el-tab-pane :label="$t('scoreEntryMana.scoreStatisticalDistribution')" name="second">
        <el-card shadow="never" body-style="padding: 24px;">
          <h1 class="condition-title">{{ $t('scoreEntryMana.scoreStatusInfo') }}</h1>
          <table class="table-style-baseinfos">
            <tbody>
              <tr>
                <td class="text-right-background-color">{{ $t('scoreEntryMana.courseNum') }}：</td>
                <td class="text-left-background-none">{{ scoreStatisticsDisInfo.courseNo }}</td>
                <td class="text-right-background-color">{{ $t('scoreEntryMana.courseCode') }}：</td>
                <td class="text-left-background-none">{{ scoreStatisticsDisInfo.courseCode }}</td>
              </tr>
              <tr>
                <td class="text-right-background-color">{{ $t('scoreEntryMana.courseName') }}：</td>
                <td class="text-left-background-none">{{ scoreStatisticsDisInfo.courseName }}</td>
                <td class="text-right-background-color">{{ $t('scoreEntryMana.teacherName') }}：</td>
                <td class="text-left-background-none">{{ scoreStatisticsDisInfo.teacherCode }}{{ scoreStatisticsDisInfo.teacherName }}</td>
              </tr>
              <tr>
                <td class="text-right-background-color">{{ $t('scoreEntryMana.assessMethod') }}：</td>
                <td class="text-left-background-none">{{ scoreStatisticsDisInfo.examSituation | examSituation }}</td>
                <td class="text-right-background-color">{{ $t('gradeRelatedSetting.gradeRecordMethod') }}：</td>
                <td class="text-left-background-none">{{ scoreStatisticsDisInfo.scoreRecordTypeI18n }}</td>
              </tr>
              <tr>
                <td class="text-right-background-color">{{ $t('scoreEntryMana.status') }}：</td>
                <td class="text-left-background-none">{{ scoreStatisticsDisInfo.releaseType | releaseType }}</td>
                <td class="text-right-background-color">{{ $t('scoreEntryMana.lastEntry') }}：</td>
                <td class="text-left-background-none">{{ scoreStatisticsDisInfo.importUserCode }}{{ scoreStatisticsDisInfo.importUserName }}{{ scoreStatisticsDisInfo.importUpdateTime }}</td>
              </tr>
            </tbody>
          </table>
          <el-table class="select-score-table" border :data="scoreStatisticsDisInfo.minorGradeDetailsInfoVoList" size="mini" style="width: 100%;">
            <!-- 成绩类型 -->
            <el-table-column :label="$t('scoreEntryMana.gradeType')" prop="scoreTypeI18n" align="center"></el-table-column>
            <!-- 成绩记录方式 -->
            <edu-table-column :label="$t('gradeRelatedSetting.gradeRecordMethod')" prop="scoreRecordTypeI18n" align="center"></edu-table-column>
            <!-- 百分比 -->
            <edu-table-column :label="$t('scoreEntryMana.percentage')" prop="percent" align="center">
              <template slot-scope="scope">
                <span>{{ (scope.row.percent || scope.row.percent === 0) ? (scope.row.percent + '%') : '' }}</span>
              </template>
            </edu-table-column>
            <!-- 状态 -->
            <edu-table-column :label="$t('scoreEntryMana.status')" prop="releaseStatus" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.releaseStatus | releaseStatus }}</span>
              </template>
            </edu-table-column>
            <!-- 上次录入 -->
            <edu-table-column :label="$t('scoreEntryMana.lastEntry')" prop="lastEntry" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.importUserCode }}{{ scope.row.importUserName }}{{ scope.row.importUpdatedTime }}</span>
              </template>
            </edu-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';

export default {
  components: {

  },
  data () {
    return {
      activeName: 'first',
      selectNum: 0,
      basicInfo: {},
      scoreStatisticsDisInfo: {}
    }
  },
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  filters: {
    examSituation(val) {
      switch (val) {
        case '1':
          return '正常'
        case '2':
          return '缓考'
        case '3':
          return '无资格'
        case '4':
          return '免试'
        default: 
          return val
      }
    },
    releaseType(val) {
      switch (val) {
        case '0':
          return '未发布'
        case '1':
          return '已发布'
        default: 
          return val
      }
    },
    releaseStatus(val) {
      switch (val) {
        case 0:
          return '未发布'
        case 1:
          return '已发布'
        default: 
          return val
      }
    }
  },
  created() {

  },
  mounted() {
    scoreManagementApi.getMinorGradeInfos(this.detailInfo).then(res => {
      if (res.code === 200) {
        this.basicInfo = res.data
        this.selectNum = this.basicInfo.selectNum ? this.basicInfo.selectNum : 0
      }
    })
    let params = {
      "calendarId": this.detailInfo.calendarId,
      "examType": this.detailInfo.examType,
      "teachingClassId": this.detailInfo.teachingClassId
    }
    // 重缓考，传参添加校区campus
    if (this.detailInfo.examType === '1') {
      params['campus'] = this.detailInfo.campus
    }
    scoreManagementApi.getMinorGradeCountDistribute(params).then(res => {
      if (res.code === 200) {
        this.scoreStatisticsDisInfo = res.data
      }
    })
  },
  watch: {
  },
  methods: {
    handleClick() {

    },
    // 判定期末成绩是否要标红
    targetFinalScore(row) {
      if ((row.retakeScore || (row.retakeScore === 0 || row.retakeScore === '0')) && row.retakeScoreFlag === 'Y') {
        return 'color: red;'
      } else if ((row.slowScore || (row.slowScore === 0 || row.slowScore === '0')) && row.slowScoreFlag === 'Y') {
        return 'color: red;'
      } else if ((row.finalScore || (row.finalScore === 0 || row.finalScore === '0')) && row.finalScoreFlag === 'Y') {
        return 'color: red;'
      } else {
        return ''
      }
    },
    // 判定总评成绩是否要标红
    getTotalScoreType(row) {
      if (row.reSlowIsPass === '0') {
        return 'color: red;'
      } else if (row.isPass === '0') {
        return 'color: red;'
      } else {
        return ''
      }
    },
    // 返回主页
    backToMain() {
      this.$emit('refresh-main-page')
    }
  }
}
</script>

<style lang="scss" scoped>
  .select-score-container ::v-deep {
    .el-tabs__header {
      margin: 0;
    }
    .el-table th {
      border-top: 0;
    }
    .select-score-table {
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      th {
        background: #edf1f5;
      }
    } 
    .table-style-baseinfos {
      border-collapse: collapse;
      table-layout: fixed;
      word-break: break-all;
      background-color: rgba(210, 212, 214, 1);
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      width: 100%;
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #8896a7;
      margin-bottom: 20px;
    }
    .table-style-baseinfos .text-right-background-color {
      background-color: #edf1f5;
      text-align: right;
    }
    .text-left-background-none {
      text-align: left;
    }
    .table-style-baseinfos td {
      width: 25%;
      background-color: rgba(255, 255, 255, 1);
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #2b3b4e;
      height: 32px;
      padding: 0 10px;
    }
  }
</style>